<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-if标签使用</title>
    <!--  本地安装 -->
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>如果今天天气好，就出去玩，不好就学习</p>
    <p>v-if 如果条件为真，元素就显示</p>
    <hr/>
    <p v-if="sun">今天天气好，可以出去玩</p>
    <p v-else>天气不好出去玩</p>


    <hr/>
    {{age}}
    <p>年龄在0~18 未成年 18~30青少年 30-60中年 60+老年</p>
    <p v-if="age<18">未成年</p>
    <p v-if="age>18 && age<30">青少年</p>
    <p v-if="age>30 && age<60">中年</p>
    <p v-if="age > 60">老年</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            sun:false,
            age:20
        }
    });
</script>
</body>
</html>